<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>

<body>
    <style type="text/css">
        html,
        body,
        ul,
        li,
        dl {
            margin: 0;
            padding: 0;
        }

        .j02 {
            width: 906px;
            margin: 0 auto;
        }

        .j02 .product {
            width: 800px;
            height: 900px;
            margin-right: 20px;
            margin-bottom: 20px;

        }

        .j02 .product:nth-of-type(3n) {
            margin-right: 0;
        }

        .j02 .product-box {
            width: 1208px;
            margin-right: -20px;
        }



        .product {
            position: relative;
            float: left;
            background: #fff;
            line-height: 1.5;
            overflow: visible;
            z-index: 1;
        }

        .product:hover {
            overflow: visible;
            z-index: 3;
        }

        .product:hover .iwrap {
            margin: -3px;
            border: 4px solid #f83760;
            -webkit-transition: border-color .2s ease-in;
            -moz-transition: border-color .2s ease-in;
            -ms-transition: border-color .2s ease-in;
            -o-transition: border-color .2s ease-in;
            transition: border-color .2s ease-in;
        }

        .iwrap {
            display: block;
            position: absolute;
            background: #fff;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border: 1px solid #ececec;
            box-sizing: content-box;
        }

        .iwrap img {
            width: 100%;
            margin-bottom: 10px;
        }

        .iwrap p.line1 {
            margin-left: 10px;
            margin-right: 10px;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .iwrap p.line2 {
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 13px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .iwrap .line3 {
            position: absolute;
            bottom: 0;
            background: #f8f8f8;
            width: 100%;
            height: 56px;
        }

        .iwrap .line3 dd {
            display: block;
            float: left;
            line-height: 1;
        }

        .iwrap .line3 .c1 {
            width: 35%;
            font-size: 26px;
            overflow: hidden;
            white-space: nowrap;
        }

        .iwrap .rmb {
            display: block;
            float: left;
            font-size: 16px;
            padding-left: 0.5em;
        }

        .iwrap .money {
            display: block;
            float: left;
        }

        .iwrap .line3 .c2 {
            min-width: 22%;
            max-width: 28%;
            height: 56px;
            box-sizing: border-box;
            overflow: hidden;
            text-align: center;
        }

        .iwrap .triangle {
            display: block;
            float: left;
            width: 0;
            height: 0;
            box-sizing: border-box;
            border-width: 28px 14px 28px 14px;
            border-style: solid;
            border-color: #f8f8f8 #f73760 #f8f8f8 #f8f8f8;
        }

        .iwrap .line3 .c3 {
            width: 40%;
            height: 56px;
            background: #f73760;
            color: #fff;
            line-height: 56px;
            text-align: center;
            float: right;
            cursor: pointer;
        }

        /* ******** 商品展示:图片列表 end  *********** */
        /**弹框**/
        .dialogBox {
            position: absolute;
            margin: 0 auto;
            margin-top: 60px;
            text-align: center;
            border: 1px solid #d2d2d2;
            z-index: 999;

        }

        .dialogDiv {
            display: none;
        }
    </style>
    <div id="main">
        <div id="list">
            <div class="j02 main clearfix">
                <!-- 把这段代码重复copy 6次 start -->
                <div class="product">
                    <div target="_blank" class="iwrap">
                        <img :src="img_url">
                        <p class="f16 line1">倒计时{{leftdate}}</p>
                        <p class="f12 line2 red"></p>
                        <dl class="line3">
                            <dd class="c2 red"><span class="rmb">￥1万</span></dd>
                            <dd class="c3 f16" @click="getprice"><i class="triangle"></i>购买</dd>
                        </dl>
                    </div>
                </div>
                <!-- 把这段代码重复copy 6次  end-->
            </div>
        </div>


    </div>


</body>
<script>


    let vue = new Vue({
        el: '#main',
        data: {
            deadline: 0,
            img_url: 'https://youjia-image.cdn.bcebos.com/modelImage/3e7fc7749996492ca2cc392bab734a21/1628501201288910972d.JPG',
            discountArr: {},
            keysArr:[],
            leftdate: '',
            discountIndex: 0,
            price:10

        },
        methods: {
            init: function () {
                //截止时间
                let deadline = (new Date("2022-04-07 23:00:00")).getTime() / 1000;
                this.deadline = deadline;
                //截止时间往前每10分钟一个折扣,设置6个区间
                //构建数组
                //['时间戳':折扣.....]         
                for (let i = 5; i >= 0; i--) {
                    let timestamp = deadline - 60 * 10 * i
                    //this.discountArr[timestamp] = 0.6 + 0.05 * i
                    this.discountArr[timestamp]=0.9 - 0.05 * i;
                    this.keysArr.push(timestamp);
                }
                this.discountIndex=this.keysArr.pop();
                console.log(this.discountArr)
            },

            countdown: function () {

                // setInterval//定时触发
                let that = this;
                //console.log(this);
                setTimeout(function () {
                    //console.log(this);//this 指向到了 window
                    //this.Vue.countdown();
                    let now = parseInt(new Date().getTime() / 1000)
                    let lefttime = that.deadline - now;
                    leftd = Math.floor(lefttime / (60 * 60 * 24));  //计算天数
                    lefth = Math.floor(lefttime / (60 * 60) % 24);  //计算小时数
                    leftm = Math.floor(lefttime / (60) % 60);  //计算分钟数
                    lefts = Math.floor(lefttime % 60);  //计算秒数
                    that.leftdate = "剩余:" + leftd + "天" + lefth + "小时" + leftm + "小时" + lefts + "秒"
                    //判断折扣
                    //console.log(that.discountArr);
                    if(now>that.discountIndex){
                        if(that.keysArr.length>0){
                            that.discountIndex=that.keysArr.pop();
                        }                     
                    }
                    that.countdown();//递归函数
                }, 1000)
                
            },
            getprice:function(){
                console.log(this.price*this.getDiscount)
            }

        },
        computed: {
            getDiscount: function () {
                console.log(this.discountIndex);
                console.log(this.discountArr);
                return this.discountArr[this.discountIndex];
            }
        }

    });

    // this 倒是表示什么？ Vue 函数 函数可以多次调用吗？this 可以理解为在一次调用
    //
    // function demo(){
    //     this
    //     let i=10
    //     i--;
    //     console.log(i)
    // }
    // demo()
    // demo()
    vue.init();
    vue.countdown();


</script>

</html>